<template>
  <div class="border-line card">
    <div style="display: flex">
      <div class="construction">
        <header-title title="保租房建设运营整体情况" @fullScreen="handleFullScreen"></header-title>
        <div style="display: flex">
          <div class="construction-icon">
            <!-- <img style="height: 10%; width: 100%" src="@/assets/construction.png" alt="" /> -->
            <svg
              t="1734595030474"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10322"
              width="200"
              height="120"
            >
              <path
                d="M985.31555555 912.49777778h-36.40888888V342.47111111c0-22.94556445-8.83484445-44.41656889-24.87523556-60.45809778S886.51889778 257.13777778 863.57333333 257.13777778H730.45333333V125.15555555c0-22.94556445-8.83484445-44.41656889-24.87523555-60.45809777C689.53656889 48.65706667 668.06556445 39.82222222 645.12 39.82222222H161.56444445c-47.68085333 0-86.47111111 38.28053333-86.47111112 85.33333333v787.34222223H38.68444445c-20.10794667 0-36.40888889 16.30094222-36.4088889 36.40888889s16.30094222 36.40888889 36.4088889 36.40888888h946.6311111c20.10794667 0 36.40888889-16.30094222 36.4088889-36.40888888s-16.30094222-36.40888889-36.4088889-36.40888889zM863.57333333 328.81777778c7.91096889 0 13.65333333 5.74236445 13.65333334 13.65333333v570.02666667H730.45333333V328.81777778h133.12zM146.77333333 125.15555555c0-7.52867555 6.63552-13.65333333 14.79111112-13.65333333h483.55555555c7.91096889 0 13.65333333 5.74236445 13.65333333 13.65333333v787.34222223h-73.95555555V620.65777778c0-59.28618667-48.23381333-107.52-107.52-107.52h-147.91111111c-59.28618667 0-107.52 48.23381333-107.52 107.52V912.49777778h-75.09333334V125.15555555z m366.36444445 787.34222223H293.54666667V620.65777778c0-19.76206222 16.07793778-35.84 35.84-35.84h147.91111111c19.76206222 0 35.84 16.07793778 35.84 35.84V912.49777778z"
                fill="#ffffff"
                p-id="10323"
              ></path>
              <path
                d="M256 294.68444445h291.27111111c20.10794667 0 36.40888889-16.30094222 36.40888889-36.4088889s-16.30094222-36.40888889-36.40888889-36.40888888H256c-20.10794667 0-36.40888889 16.30094222-36.40888889 36.40888888s16.30094222 36.40888889 36.40888889 36.4088889zM256 439.18222222h291.27111111c20.10794667 0 36.40888889-16.30094222 36.40888889-36.40888889s-16.30094222-36.40888889-36.40888889-36.40888888H256c-20.10794667 0-36.40888889 16.30094222-36.40888889 36.40888888s16.30094222 36.40888889 36.40888889 36.40888889z"
                fill="#ffffff"
                p-id="10324"
              ></path>
            </svg>
          </div>
          <div class="construction-task">
            <div>计划套数:<span>4000</span>套</div>
            <div>开工套数:<span>4000</span>套</div>
            <div>竣工套数:<span>4000</span>套</div>
            <div>出租套效:<span>4000</span>套</div>
          </div>
        </div>
      </div>
      <div class="target-task">
        <header-title title="2024年目标任务完成情况" @fullScreen="handleFullScreen"></header-title>
        <!-- <echarts-view ref="echarts" :options="option" height="360px"></echarts-view> -->
        <div class="target">
          <div class="task">
            <div class="target-task-item">
              <div>开工目标:<span>4000</span>套</div>
            </div>
            <div class="target-task-item">
              <div>已开工:<span>4000</span>套</div>
            </div>
            <div class="target-task-item">
              <div>竣工目标:<span>4000</span>套</div>
            </div>
            <div class="target-task-item">
              <div>已完成:<span>4000</span>套</div>
            </div>
            <div class="target-task-item">
              <div>出租目标:<span>95</span>%</div>
            </div>
            <div class="target-task-item">
              <div>出租率:<span>95</span>%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle'
import { echartsView } from '@/components'
import axios from 'axios'
import 'echarts-gl'
export default {
  props: {
    isFullscren: {
      type: Boolean,
      default: false,
    },
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      option: {},
      projectData: [
        { name: '市级统筹（住投公司）公租房', value: 40295 },
        { name: '各区政府（乡镇）自建公租房', value: 4498 },
        { name: '各区企业自建公租房', value: 10131 },
        { name: '市教育局自管教师公租房', value: 6354 },
        { name: '一市三县公租房', value: 15564 },
        { name: '中天共有产权公租房', value: 19440 },
      ],
    }
  },
  mounted() {},
  methods: {
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 200px;
  &-content {
    margin-top: 10px;
    font-size: 16px;
  }
}
.construction-task {
  font-size: 18px;
  text-align: center;
  line-height: 35px;
  margin-top: 10px;
  span {
    font-weight: 600;
    margin-left: 10px;
    font-size: 20px;
  }
  // line-height: 400px;
}
.construction {
  width: 50%;
  .construction-icon {
    height: 70%;
    width: 50%;
    .icon {
      float: right;
      margin-top: 20px;
    }
  }
}
.target-task {
  font-size: 18px;
  width: 50%;
  margin-left: 50px;
  .target {
    margin-top: 10px;
  }
  .task {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 30px;
  }
  .target-task-item {
    display: flex;
    width: 50%;
    line-height: 40px;
    // flex: 1;
    span {
      font-weight: 600;
      font-size: 20px;
      margin-left: 10px;
    }
  }
}
</style>
